{extend name="base" /}
{block name="content"}
<div class="g-main">
    <div class="m-main-title">
        <div class="m-container-fluid">
            <a href="{:url('index/welcome')}"><i class="icon icon-home"></i>首页</a>
            <span class="icon-angle-right"></span>
            <span>商城</span>
            <span class="icon-angle-right"></span>
            <span>商品管理</span>
            <span class="icon-angle-right"></span>
            <span>商品规格</span>
            <span class="icon-angle-right"></span>
            <span>{$info ? '编辑' : '添加'}规格</span>
            <a class="u-flush"><i class="icon-repeat"></i></a>
        </div>
    </div>
    <div class="m-main-content">
        <div class="m-container">
            <div class="m-form">
                <form class="layui-form" id="j_form">
                    <table class="m-table">
                        <thead>
                            <tr>
                                <th colspan="2">{$info ? '编辑' : '添加'}规格</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td width="15%"><label for="name">规格名称<em>*</em></label></td>
                                <td><input type="text" class="u-ipt u-ipt-long" name="name" id="name" placeholder="请输入规格名称" value="{$info.name}" /></td>
                            </tr>
                            <tr>
                                <td><label for="">显示方式</label></td>
                                <td>
                                    <input type="radio" name="show_type" lay-filter="show_type" value="1" title="文字"{if condition="!$info || $info['show_type'] eq 1"} checked{/if} />
                                    <input type="radio" name="show_type" lay-filter="show_type" value="2" title="颜色"{if condition="$info && $info['show_type'] eq 2"} checked{/if} />
                                    <input type="radio" name="show_type" lay-filter="show_type" value="3" title="图片"{if condition="$info && $info['show_type'] eq 3"} checked{/if} />
                                </td>
                            </tr>
                            <tr>
                                <td><label for="list_order">排序</label></td>
                                <td><input type="text" class="u-ipt u-ipt-small" name="list_order" id="list_order" placeholder="请输入排序值" value="{$info.list_order|default=0}" /><span>值越大越排在前面</span></td>
                            </tr>
                            <tr>
                                <td><label for="">规格属性</label></td>
                                <td class="m-spec-attr">
                                    <table class="m-table m-fields">
                                        <thead>
                                            <tr>
                                                <th width="60%">属性名称</th>
                                                <th width="20%">排序值</th>
                                                <th width="20%">操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="j_spec">
                                            {if condition="!empty($info['spec_value'])"}
                                            {foreach name="$info['spec_value']" item="v"}
                                            <tr>
                                                <td><div class="m-spec-input fl"><input type="text" name="specs[]" class="u-ipt u-ipt-def" value="{$v.spec_value_name}"></div><div class="m-color{if condition='$info["show_type"] neq 2'} dn{/if} fl"><input type="color" name="color[]" value="{$v.spec_value_data}" /></div></td>
                                                <td><input type="text" name="spec_value_order[]" lay-skin="primary" class="u-ipt u-ipt-tiny" value="{$v.list_order}" /></td>
                                                <td><input type="hidden" name="spec_value_id[]" value="{$v.id}"><a href="javascript:;" title="删除" class="u-del-spec" data-id="{$v.id}"><i class="icon-trash"></i></a></td>
                                            </tr>
                                            {/foreach}
                                            {else/}
                                            <tr>
                                                <td><div class="m-spec-input fl"><input type="text" name="specs[]" class="u-ipt u-ipt-def"></div><div class="m-color dn fl"><input type="color" name="color[]" /></div></td>
                                                <td><input type="text" name="spec_value_order[]" lay-skin="primary" class="u-ipt u-ipt-tiny" value="0" /></td>
                                                <td><input type="hidden" name="spec_value_id[]" value=""><a href="javascript:;" title="删除" class="u-del-spec"><i class="icon-trash"></i></a></td>
                                            </tr>
                                            {/if}
                                        </tbody>
                                    </table>
                                    <div class="mt-10"><a class="u-add-spec">添加一个属性</a></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="m-form-btn"><input type="hidden" name="id" value="{$info.id}"><button id="j_btn" class="u-btn">确定提交</button></div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="extrajs"}
{include file="public:upload"/}
<script>
    $(function(){
        $('.u-add-spec').click(function(){
            var show_type = $('input[name="show_type"]:checked').val();
            var display   = ' dn';
            if (show_type == 2) {
                display = '';
            } else {
                display = ' dn';
            }
            var html = '<tr><td><div class="m-spec-input fl"><input type="text" name="specs[]" class="u-ipt u-ipt-def"></div><div class="m-color'+display+' fl"><input type="color" name="color[]" /></div></td><td><input type="text" name="spec_value_order[]" lay-skin="primary" class="u-ipt u-ipt-tiny" value="0" /></td><td><input type="hidden" name="spec_value_id[]" value=""><a href="javascript:;" title="删除" class="u-del-spec"><i class="icon-trash"></i></a></td></tr>';
            $('#j_spec').append(html);
        });
        
        $('body').on('click', '.u-del-spec', function(){
            var $that = $(this);
            var id    = $that.attr('data-id');
            if ($('.u-del-spec').length <= 1) {
                dialog.error('至少保留一个属性值');
                return false;
            }
            dialog.confirm('您确定删除此规格属性吗？', function(){
                if (typeof(id) == 'undefined') {
                    $that.parent().parent().remove();
                } else {
                    var index = dialog.loading();
                    $.post('{:url("GoodSpecValue/action")}', {do_action: 'delete', id: id}, function(ret){
                        if (ret.status == 0) {
                            $that.parent().parent().remove();
                            layer.close(index);
                        }
                    }, 'json');
                }
            });
        });
        layui.use('form', function(){
            var form = layui.form;
            
            form.on('radio(show_type)', function(data){
                if (data.value == 2) {
                    $('.m-color').show();
                } else {
                    $('.m-color').hide();
                }
            });
            form.render('radio');
        })
    })
</script>
{/block}